<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />    
	<script src="http://code.jquery.com/jquery-1.8.3.js"></script>    
	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>    
	<style type="text/css">
		.gradecss{
			position: relative;
			top:10px;
			width: 1024px;
		}
		#slider{
			position: relative;
			top: 0px;
			left: 8px;
		}
		#gradeBtn{
			position: relative;
			top: 0px;
		}
		.replyTable{
			width: 630px;
		}
		table.replyListTable
		{
			width: 800px;
			border-collapse: collapse;
		}
		table.replyListTable tr{
			font-size:9pt;
			color: #535353;
		}
		table.replyListTable tr td{
			padding-top: 15px;
			padding-bottom: 15px;
		}
		.replyListTable_tr{
			margin:10px;
			border-bottom: 1px solid #c1c1c1;
		}
		.replyListTable_tr_admin{
			margin:10px;
			border-bottom: 1px solid #c1c1c1;
			background-color:  #f7f7f7;
		}
		.rep_list{
			border: none;
		}
		.rep_content{
			color: #a4a4a4;
			font-size: 10pt;
			resize:none;
		}
		.reply_content_write{
			color: #000000;
			font-size: 10pt;
			resize:none;
		}
		
	</style>
	 <script type="text/javascript">
	 $(function() {
		 
		 //댓글 보기, 댓글 닫기 버튼 toggle
		 if($("#reply_flag").val()==""||$("#reply_flag").val()=="false"){
				$("#footer_reply").hide();
			}else if($("#reply_flag").val()=="true"){
				$("#replybtn").attr("src","${initParam.root }/img/foot/main-reply-btn2.png");
				$("#footer_reply").show();
			}
			 $(".reply").toggle(function(){
					if($("#reply_flag").val()==""||$("#reply_flag").val()=="false"){
						$("#replybtn").attr("src","${initParam.root }/img/foot/main-reply-btn2.png");
						$("#reply_flag").val("true");
						$("#footer_reply").show();
					}else if($("#reply_flag").val()=="true"){
						$("#replybtn").attr("src","${initParam.root }/img/foot/main-reply-btn.png");
						$("#reply_flag").val("false");
						$("#footer_reply").hide();
					}
			}, 
			function(){
				if($("#reply_flag").val()==""||$("#reply_flag").val()=="false"){
					$("#replybtn").attr("src","${initParam.root }/img/foot/main-reply-btn2.png");
					$("#reply_flag").val("true");
					$("#footer_reply").show();
				}else if($("#reply_flag").val()=="true"){
					$("#replybtn").attr("src","${initParam.root }/img/foot/main-reply-btn.png");
					$("#reply_flag").val("false");
					$("#footer_reply").hide();
				}
			});
		 
		 //jquery ui 슬라이더
		 $( "#slider" ).slider({
			 value:5,
			 min: 0,
			 max: 5,
			 step: 0.5,
			 slide: function( event, ui ) {
				$( "#grade" ).val( ui.value );
		 		$("#gradeImg").attr("src","${initParam.root }/img/main/grade/contents-grade-"+ui.value+".png");
		 }
		 });
		$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
		
		//평점 등록 버튼 click
		$("#gradeBtn").click(function(){
			if(${sessionScope.loginMember==null}){
				alert("로그인하셔야 이용가능합니다.");
			}else if(${sessionScope.loginMember.mvoLogin.m_id==sessionScope.recipeContent.rvo.m_id}){
				alert("본인의 게시물에 평가 할 수 없습니다.");
			}else if(confirm("평점 "+$( "#grade" ).val()+"점 등록하시겠습니까?")){
				var grade=parseFloat($( "#grade" ).val());
				
				if($(":hidden[name=page]").val()=="next"){
					location.href="recipe.do?command=recipeGrade&r_no=${sessionScope.recipeContent.rvo.r_no}&m_id=${sessionScope.loginMember.mvoLogin.m_id}&r_grade="+grade+"&pageNo="+$("#now_pageNo").text()+"&page="+($(":hidden[name=page]").val()+"&r_gcnt=${sessionScope.recipeContent.rvo.r_gcnt}");                                         
				}else{
					location.href="recipe.do?command=recipeGrade&r_no=${sessionScope.recipeContent.rvo.r_no}&m_id=${sessionScope.loginMember.mvoLogin.m_id}&r_grade="+grade+"&pageNo="+$("#now_pageNo").text()+"&page="+($(":hidden[name=page]").val()-1+"&r_gcnt=${sessionScope.recipeContent.rvo.r_gcnt}");                                         
				}
			}
		});
		//평가를 하고 리로딩시 결과에 따라 alert창 띄움
		if(${requestScope.replyTxt==false}){
			alert("평가 완료 되었습니다.");
		}else if(${requestScope.replyTxt==null}){
			//최초 로딩시에는 아무것도 하지 않음 
		}else if(${requestScope.replyTxt==true}){
			alert("이미 평가 하셨습니다.");
		}
		
		//댓글 textarea 에 글을 쓸때 로그인 체크
		$("#rep_content").click(function(){
			if(${sessionScope.loginMember==null}){
				alert("로그인하셔야 이용가능합니다.");
			}else{
				if($("#reply_content_hidden").val()=="0"){
					$("#reply_content_hidden").val("1");
					$("#rep_content").val("");
					$("#rep_content").removeClass("rep_content");
					$("#rep_content").addClass("reply_content_write");
				}else{
					$("#rep_content").removeClass("rep_content");
					$("#rep_content").addClass("reply_content_write");
				}
			}
		});
		
		//댓글 등록 버튼
		$("#reply_writeBtn").click(function(){
			if(${sessionScope.loginMember==null}){
				alert("로그인하셔야 이용가능합니다.");
			}else if($("#rep_content").val()==""||$("#rep_content").val()=="로그인후 작성가능합니다."){
				alert("댓글을 입력하세요");
			}else{
				if(confirm("댓글을 등록하시겠습니까?")){
					if($(":hidden[name=page]").val()=="next"){
						$(":hidden[name=rpage]").val($(":hidden[name=page]").val());
					}else{
						$(":hidden[name=rpage]").val(($(":hidden[name=page]").val()-1));
					}
					$("#replyForm").submit();
				}
			}
		});
		//댓글 삭제 버튼
		$(".deleteReplyBtn").click(function(){
			if(confirm("댓글을 삭제하시겠습니까?")){
				var id=$(this).find(":hidden[name=m_id]").val();
				var no=$(this).find(":hidden[name=rep_no]").val();
				if($(":hidden[name=page]").val()=="next"){
					$(":hidden[name=rpage]").val($(":hidden[name=page]").val());
					location.href="recipe.do?command=deleteReply&rep_no="+no+"&m_id="+id+"&pageNo="+$("#now_pageNo").text()+"&rpage="+($(":hidden[name=page]").val());
				}else{
					$(":hidden[name=rpage]").val(($(":hidden[name=page]").val()-1));
					location.href="recipe.do?command=deleteReply&rep_no="+no+"&m_id="+id+"&pageNo="+$("#now_pageNo").text()+"&rpage="+($(":hidden[name=page]").val()-1);
				}
			}
		});
		//댓글의 댓글(관리자) 등록 버튼
	
		
		//페이징 a href jqeury
		$(".paging_pageNo").click(function(){
			//alert($(this).text());
			if($(":hidden[name=page]").val()=="next"){
				$(this).attr('href',"recipe.do?command=getRecipeReplyListPageing&r_no=${sessionScope.recipeContent.rvo.r_no}&pageNo="+$(this).text()+"&page="+($(":hidden[name=page]").val())); 
			}else{
				$(this).attr('href',"recipe.do?command=getRecipeReplyListPageing&r_no=${sessionScope.recipeContent.rvo.r_no}&pageNo="+$(this).text()+"&page="+($(":hidden[name=page]").val()-1)); 
			}
		});
		$(".paging_prev_arrow").click(function(){
			if($(":hidden[name=page]").val()=="next"){
				$(this).attr('href',"recipe.do?command=getRecipeReplyListPageing&r_no=${sessionScope.recipeContent.rvo.r_no}&pageNo="+${requestScope.replyList.pagingBean.endPageOfPageGroup+1}+"&page="+($(":hidden[name=page]").val())); 
			}else{
				$(this).attr('href',"recipe.do?command=getRecipeReplyListPageing&r_no=${sessionScope.recipeContent.rvo.r_no}&pageNo="+${requestScope.replyList.pagingBean.endPageOfPageGroup+1}+"&page="+($(":hidden[name=page]").val()-1)); 
			}
		});
		
		$(".paging_next_arrow").click(function(){
			if($(":hidden[name=page]").val()=="next"){
				$(this).attr('href',"recipe.do?command=getRecipeReplyListPageing&r_no=${sessionScope.recipeContent.rvo.r_no}&pageNo="+(${requestScope.replyList.pagingBean.startPageOfPageGroup-1})+"&page="+($(":hidden[name=page]").val())); 
			}else{
				$(this).attr('href',"recipe.do?command=getRecipeReplyListPageing&r_no=${sessionScope.recipeContent.rvo.r_no}&pageNo="+(${requestScope.replyList.pagingBean.startPageOfPageGroup-1})+"&page="+($(":hidden[name=page]").val()-1)); 
			}
		});
	 });
</script>
<!-- 댓글 보기, 닫기 버튼 -->	 
<div class="reply" align="center">
	<img id="replybtn" src="${initParam.root }/img/foot/main-reply-btn.png" style="cursor: pointer;">
</div>
<div class="replyCtn"><b>(${requestScope.replyList.pagingBean.totalContent})</b></div>	

<div id="footer_reply">
	<!-- 평점 등록 -->
	<div class="gradecss" align="center">
		<table class="replyTable">
			 <colgroup>
                   <col width="100px"/>
                   <col width="120px"/>
                   <col width="70px"/>
                   <col width="250px"/>
                   <col />
             </colgroup>
			<tr>
				<td ><img src="${initParam.root }/img/foot/footer-grade-title.gif"></td>
				<td><img id="gradeImg" src="${initParam.root }/img/main/grade/contents-grade-5.png"></td>
				<td><input type="text"  id="grade" value="5" style="width:60px; border: 0; color: #000000; font-size:30pt; font-weight: bold;"></td>
				<td><div id="slider" style=" height:5px; width: 200px;"></div></td>
				<td><input id="gradeBtn" type="button" class="button_img" value="등록" style="background-color:#c1c1c1; width: 50px; height: 40px;"></td>
			</tr>
		</table>
   	</div>
   	
 	<br><br>
 	<!-- 댓글 등록과 리스트 div -->
 	<div id="recipe_reply" align="center">
 		<!-- hidden 값으로 '로그인후 작성가능합니다' 메세지 없에고 나타내기 -->
 		<input type="hidden" id="reply_content_hidden" name="reply_content_hidden" value="0">
 		<!-- 댓글등록 css background -->
 		<div style="width: 800px;height: 150px;background-color: #f7f7f7;"><br>
 		<!-- 댓글 등록 테이블 -->
 		<table class="replyTable">
 			<tr align="left" height="30">
 				<td colspan="2"><img src="${initParam.root }/img/foot/reply/footer-reply-title.gif"></td>
 			</tr>
 			<tr>
 				<td>
 					<form id="replyForm" method="post" action="recipe.do">
 					<input type="hidden" name="command" value="recipeReply">
 					<input type="hidden" name="rpage" value="">
 					<textarea rows="4" cols="75"  id="rep_content" name="rep_content" class="rep_content">로그인후 작성가능합니다.</textarea>
 					</form>
 				</td>
 				<td><input type="button" id="reply_writeBtn" value="댓글등록" class="button_img" style="width: 100%; height: 100%; background-color:#c1c1c1;"></td>
 			</tr>
 		</table></div><br>
 		
 		<!-- 댓글 리스트 테이블 -->
		 <table class="replyListTable">
		 	  <colgroup>
                   <col width="100px"/>
                   <col width="180px"/>
                   <col />
             </colgroup>
            <c:forEach var="rrvo" items="${requestScope.replyList.list}">
			 	<c:choose>
			 		<c:when test="${rrvo.m_type=='a' }">
			 			<tr class="replyListTable_tr_admin">
			 		</c:when>
			 		<c:otherwise>
			 			<tr class="replyListTable_tr">
			 		</c:otherwise>
			 	</c:choose>
		 			<td align="center" ><b>${rrvo.m_name }</b></td>
		 			<td align="center" >${rrvo.m_id}<br><span style="color: #999999">${rrvo.rep_date }</span><br>
		 				<c:choose>
			 				<c:when test="${rrvo.m_id==sessionScope.loginMember.mvoLogin.m_id}">
			 						<span class="deleteReplyBtn">
 									<input type="hidden" name="rep_no" value="${rrvo.rep_no }">
 									<input type="hidden" name="m_id" value="${rrvo.m_id }">
			 						<input type="button" name="deleteReplyBtn" value="삭제" class="button_img" style="background-color:#c1c1c1; width: 45px;">
			 						</span>
			 				</c:when>
			 				<c:when test="${sessionScope.loginMember.mvoLogin.m_type=='a' }">
 									<span  class="deleteReplyBtn">
 									<input type="hidden" name="rep_no" value="${rrvo.rep_no }">
 									<input type="hidden" name="m_id" value="${rrvo.m_id }">
									<input type="button" name="deleteReplyBtn" value="삭제" class="button_img" style="background-color:#c1c1c1; width: 45px;">
									</span>
			 				</c:when>
			 			</c:choose>
		 			</td>
		 			<td>
		 				<table width="100%">
		 					<tr><td style="text-align: left; word-break:break-all;">${rrvo.rep_content }</td></tr>
		 				</table><br>
 					<%-- <c:if test="${sessionScope.loginMember.mvoLogin.m_type=='a' }">
		 				<table width="100%">
		 					<tr>	
		 						<td><textarea rows="4" cols="60"  class="replyReplyTxt" name="replyReplyTxt"></textarea></td>
								<td><input type="button" id="replyReplyBtn" value="댓글등록" class="button_img" style="width: 100%; height: 100%; background-color:#c1c1c1;"></td>
		 					</tr>
		 				</table>
					</c:if> --%>
		 			</td>
		 		</tr>
		 	</c:forEach>
		 </table>
 		</div>
	<br><br>
	<!-- 페이징 처리 -->	
	<%-- 이전 페이지 그룹이 있으면 이미지 보여준다.
		   이미지 링크는 현 페이지 그룹 시작페이지 번호 -1 =>
		   이전 페이지 그룹의 마지막 페이지 번호로 한다. 
	 --%>
	 <c:if test="${requestScope.replyList.pagingBean.previousPageGroup}">
	 <a href="" class="paging_next_arrow"><img src="${initParam.root }/img/paging/left_arrow_btn.gif"></a>
	 </c:if>
	 &nbsp;&nbsp;
	<%-- PagingBean 을 이용해서 현재 페이지에 해당되는 페이지그룹의
		   시작페이지~~마지막페이지까지 화면에 보여준다. 
		   이 때 현재 페이지를 제외한 나머지 페이지는 링크를 걸어
		   해당 페이지에 대한 게시물 리스트 조회가 가능하도록 한다. 
	 --%>	
	<c:forEach var="i" 
	begin="${requestScope.replyList.pagingBean.startPageOfPageGroup}"
	 end="${requestScope.replyList.pagingBean.endPageOfPageGroup}">
	 <c:choose>
	 <c:when test="${requestScope.replyList.pagingBean.nowPage!=i}">
	 <a href="" class="paging_pageNo" >${i}</a>
	 </c:when>
	 <c:otherwise>
	<a id="now_pageNo">${i}</a>
	</c:otherwise>
	</c:choose>
	</c:forEach>	 
	<%-- 다음 페이지 그룹이 있으면 화살표 이미지를 보여준다.
			이미지 링크는 현재 페이지 그룹의 마지막 번호 + 1 => 
			다음 그룹의 시작 페이지로 링크한다. 
	 --%>&nbsp;
	 <c:if test="${requestScope.replyList.pagingBean.nextPageGroup}">
	 <a href="" class="paging_prev_arrow"><img src="${initParam.root }/img/paging/right_arrow_btn.gif"></a>
	 </c:if>	 
 	 <br><br>
</div>    
<img src="${initParam.root }/img/foot/foot-01-img.gif" class="copyright"><br>

